<script setup lang="ts">
import KnowledgeCard from './KnowledgeCard.vue'
import { ref } from 'vue'
import type {
  KnowledgeList,
  KnowledgeParams,
  KnowledgeType
} from '@/types/consult'
import { getKnowledgePage } from '@/services/consult'

const props = defineProps<{
  type: KnowledgeType
}>()

// 加载中状态
const loading = ref(false)
// 是否完全加载完毕数据
const finished = ref(false)
// 数据列表
const list = ref<KnowledgeList>([])
// 查询参数
const params = ref<KnowledgeParams>({
  type: props.type,
  current: 1,
  pageSize: 5
})
// 滚动到底部

const onLoad = async () => {
  const res = await getKnowledgePage(params.value)
 
  // list.value.push({"id":1,"title":"sdfsdf","coverUrl":"1.jpg","topics":["2","t"],"collectionNumber":10})
  
  list.value=res.mes
  // 判断已经加载完成了
  // if (params.value.current >= 1) {
  //   finished.value = true
  // } else {
  //   params.value.current++
  // }
  loading.value = false
}
onLoad()
</script>

<template>
  <div class="knowledge-list">
 
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      
      <van-cell v-for="item in list" :key="item.id">  
    <div class="cell-content">  
      <div class="cell-column">{{ item.id }}</div>  
      <div class="cell-column">{{ item.title }}</div>  
    
    </div>  
  </van-cell> 
    </van-list>
    <!-- <van-pagination v-model="currentPage" :total-items="totals" :items-per-page="pagesize" /> -->

  </div>
</template>


<style lang="scss" scoped>
.consult-page {
  padding-top: 46px;}
.cell-content {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 8px; /* 或者你需要的内边距 */  
}  
  
.cell-column {  
  /* 你可以根据需要调整这些样式 */  
  flex: 1; /* 让每个列占据相同的空间，或者你可以设置具体的宽度 */  
  text-align: center; /* 或者 left, right 根据你的需求 */  
  padding: 0 8px; /* 如果你想在列之间添加一些空间 */  
}  

</style>


